import echarts from 'echarts'
// import '../../static/js/echarts/echarts.js'

import Vue from 'vue'
const v = new Vue()
export const drawLine = (params) => {
  const { id, color, dataZoom, crditLevel, xData } = params
  let lineChart = echarts.init(document.getElementById(id))
  const colors = color || [
    '#6FFEB0',
    '#6DEFFF',
    '#FBF592',
    '#FF78F5',
    '#F44153',
  ]
  let seriesData = crditLevel
  seriesData.forEach((item, index) => {
    item.textStyle = {
      color: colors[index],
    }
  })
  lineChart.setOption({
    color: colors,
    legend: {
      data: seriesData,
      top: 0,
      right: 15,
      itemWidth: 10,
      itemHeight: 10,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      top: '50',
      left: '3%',
      right: '4%',
      bottom: !dataZoom ? '3%' : '18',
      containLabel: true,
    },
    label: {
      show: false,
      position: 'top',
    },
    xAxis: {
      type: 'category',
      splitLine: {
        lineStyle: {
          color: '#fff',
          width: 0.5,
        },
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
          width: 0.5,
          fontSize: 12,
        },
      },
      data: xData, // ['建设单位', '施工总承包', '劳务公司'],
    },
    yAxis: {
      type: 'value',
      name: '单位：个',
      nameLocation: 'end',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
          width: 0.5,
        },
      },

      splitLine: {
        lineStyle: {
          color: '#416180',
          width: 0.5,
        },
      },
      nameTextStyle: {
        padding: [0, 0, 0, 0],
        width: 100,
      },
    },
    dataZoom: dataZoom,
    series: seriesData,
  })
  window.addEventListener('resize', () => {
    lineChart.resize()
  })
}

export const drawLineNM = (params) => {
  const { id, color, dataZoom, crditLevel, curData, xData, isCrdit } = params
  let lineChart = echarts.init(document.getElementById(id))
  const colors = color || [
    '#6FFEB0',
    '#6DEFFF',
    '#FBF592',
    '#FF78F5',
    '#F44153',
  ]
  let curXData = []
  let seriesData = []
  let legendData = []
  if (!xData) {
    curData.forEach((item) => {
      curXData.push(item.name)
    })
  } else {
    curXData = xData
  }
  crditLevel.forEach((item, index) => {
    legendData.push({
      name: item,
      textStyle: { color: colors[index] },
    })

    let arr = []
    curData.forEach((m, n) => {
      isCrdit ? arr.push(m[index]) : arr.push(m[item] ? m[item] : 0)
    })
    seriesData.push({
      name: item,
      type: 'bar',
      barWidth: 10,
      data: arr,
    })
  })
  lineChart.setOption({
    color: colors,
    legend: {
      data: legendData,
      top: 0,
      right: 15,
      itemWidth: 10,
      itemHeight: 10,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      top: '50',
      left: '3%',
      right: '4%',
      bottom: !dataZoom ? '3%' : '18',
      containLabel: true,
    },
    label: {
      show: false,
      position: 'top',
    },
    xAxis: {
      type: 'category',
      splitLine: {
        lineStyle: {
          color: '#fff',
          width: 0.5,
        },
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
          width: 0.5,
          fontSize: 12,
        },
      },
      data: curXData, // ['建设单位', '施工总承包', '劳务公司'],
    },
    yAxis: {
      type: 'value',
      name: '单位：个',
      nameLocation: 'end',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
          width: 0.5,
        },
      },

      splitLine: {
        lineStyle: {
          color: '#416180',
          width: 0.5,
        },
      },
      nameTextStyle: {
        padding: [0, 0, 0, 0],
        width: 100,
      },
    },
    dataZoom: dataZoom,
    series: seriesData,
  })
  window.addEventListener('resize', () => {
    lineChart.resize()
  })
}

export const drawPie = (params) => {
  const { id, color, data } = params
  let lineChart = echarts.init(document.getElementById(id))
  const colors = color || [
    '#6FFEB0',
    '#6DEFFF',
    '#FBF592',
    '#FF78F5',
    '#F44153',
  ]
  let dataLegend = data || [
    { name: 'A+', value: 0 },
    { name: 'A', value: 0 },
    { name: 'B', value: 0 },
    { name: 'C', value: 0 },
  ]
  dataLegend.forEach((item, index) => {
    item.textStyle = {
      color: colors[index],
    }
  })
  lineChart.setOption({
    color: colors,
    legend: {
      data: dataLegend,
      top: 0,
      right: 15,
      itemWidth: 10,
      itemHeight: 10,
    },
    grid: {
      top: '50',
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    series: [
      {
        name: '访问来源',
        startAngle: 30, //饼图渲染的开始角度
        type: 'pie',
        radius: ['50%', '60%'],
        center: ['50%', '60%'],
        // avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            // position: [10, 10],
            position: 'top',
            distance: 5,
            rich: {
              a: {
                color: '#fff',
                lineHeight: 17,
                align: 'left',
                fontSize: 12,
              },
              b: {
                backgroundColor: '#52FFAC',
                width: 90,
                height: 2,
              },
              c: {
                color: '#FED857',
                lineHeight: 17,
                align: 'left',
                fontSize: 12,
              },
            },
            formatter: `{a|{b}\n}{b|}\n{c|{d}%}  {a|{c}个}`,
          },
        },
        labelLine: {
          show: true,
          distance: 1,
        },
        emphasis: {
          radius: ['50%', '65%'],
          label: {
            show: true,
            fontWeight: 'bold',
          },
        },

        data: data,
      },
    ],
  })
  window.addEventListener('resize', () => {
    lineChart.resize()
  })
}

export const drawLineArea = (
  id,
  crditLevelList,
  data,
  countArr,
  xData,
  type
) => {
  let defaultData = [
    ...data,
    {
      name: '项目总数',
      type: 'line',
      yAxisIndex: 1,
      smooth: type == 1 ? true : false,
      label: {
        show: false,
        position: 'inside',
        color: '#00BBFF',
        formatter: (params) => {
          return `${params.value}`
        },
      },
      areaStyle: {
        normal: {
          //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0,187,255,0.8)',
            },
            {
              offset: 0.34,
              color: 'rgba(0,187,255,0.45)',
            },
            {
              offset: 1,
              color: 'rgba(0,187,255,0.20)',
            },
          ]),
        },
      },
      data: countArr,
    },
  ]
  let doubleBarChart = echarts.init(document.getElementById(id))
  doubleBarChart.setOption({
    color: ['#6FFEB0', '#6DEFFF', '#FBF592', '#FF78F5', '#F44153'],
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: [...crditLevelList, '项目总数'],
      top: 0,
      right: 15,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      top: '50',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: { interval: 0, retate: 40 },
        splitLine: {
          lineStyle: {
            color: '#fff',
            width: 0.5,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 0.5,
          },
        },
        nameTextStyle: {
          fontSize: '10',
          color: '#fff',
          fontStyle: 'oblique',
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        name: '单位：个',
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        nameTextStyle: {
          padding: [0, 0, 0, 0],
        },
      },
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
            width: 0.5,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#416180',
            width: 0.5,
          },
        },
        nameTextStyle: {
          padding: [0, 0, 0, 0],
        },
      },
    ],
    series: defaultData,
  })
  window.addEventListener('resize', () => {
    doubleBarChart.resize()
  })
}

/**
 * @name:项目明细报表  绘制echart柱形图
 * @param {string} 颜色
 * @param {string} 渲染容器的id
 * @param {Array} 渲染的数据
 */
export const drarProjectChart = (color, id, data) => {
  var chartDom = document.getElementById(id)
  var myChart = echarts.init(chartDom)
  var option
  option = {
    color: [color],
    legend: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }, // 默认为直线，可选为：'line' | 'shadow'
      formatter: function (params) {
        return `<p>${params[0].data[0]}<br/>${
          '项目数：' + params[0].data[1]
        }个</p>`
      },
    },
    grid: {
      left: '0px',
      right: '0px',
      bottom: '45px',
      top: '35px',
      containLabel: true,
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    dataset: { source: data },
    xAxis: {
      type: 'category',
      axisTick: { show: false },
      axisLabel: {
        margin: 15, //刻度标签与轴线之间的距离
        color: '#485465', //刻度标签颜色
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#E7EBEF',
          width: 1,
          type: 'solid',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#ff0000',
          width: 0.5,
        },
      },
    },
    yAxis: {
      axisTick: { show: false },
      axisLabel: { color: '#A0A4AA' },
      axisLine: {
        show: false,
        lineStyle: {
          fontSize: 12,
          color: '#A0A4AA',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#E7EBEF',
          width: 0.5,
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 22,
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: {
                //数值样式
                fontSize: 14,
              },
            },
          },
        },
      },
    ],
  }

  option && myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
